﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>index</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/area_echarts.js"></script>
  <link rel="stylesheet" href="css/comon0.css" />
</head>
<script>
  $(document).ready(function () {
    var whei = $(window).width()
    $('html').css({ fontSize: whei / 20 })
    $(window).resize(function () {
      var whei = $(window).width()
      $('html').css({ fontSize: whei / 20 })
    })
  })
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/mqtt.min.js"></script>
<style>
  .camera-container {
    position: relative;
    display: inline-block;
    margin: 0;
  }

  .camera-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    /* 完全透明 */
    border: none;
    cursor: pointer;
  }
</style>

<body>
  <div class="canvas" style="opacity: 0.2">
    <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
  </div>
  <div class="head">
    <h1>交通信号识别实时监控系统</h1>
    <div class="weather"><span id="showTime"></span>
    </div>
    <script>
      var t = null
      t = setTimeout(time, 1000) //開始运行
      function time() {
        clearTimeout(t) //清除定时器
        dt = new Date()
        var y = dt.getFullYear()
        var mt = dt.getMonth() + 1
        var day = dt.getDate()
        var h = dt.getHours() //获取时
        var m = dt.getMinutes() //获取分
        var s = dt.getSeconds() //获取秒
        document.getElementById('showTime').innerHTML =
          y + '年' + mt + '月' + day + '日' + h + '时' + m + '分' + s + '秒'
        t = setTimeout(time, 1000) //设定定时器，循环运行
      }
    </script>
  </div>
  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall">
          <div class="alltitle">数据总览</div>
          <div class="sycm">
            <ul class="clearfix">
              <li>
                <h2>1</h2>
                <span>小车数目</span>
              </li>
              <li>
                <h2>1</h2>
                <span>摄像头数目</span>
              </li>
              <li>
                <h2>1</h2>
                <span>运行中的摄像头</span>
              </li>
            </ul>
          </div>
          <div class="boxfoot"></div>
        </div>

        <div class="boxall">
          <div class="alltitle alltitle2">小车停车或行驶</div>

          <ul class="tabnav">
            <li style="height: auto">
              <div class="gdhead">
                <span>小车状态</span><span>时间</span>
              </div>
              <div class="scrollDiv" style="height: 1.63rem">
                <ul class="smjl" id="carStatusList">

                </ul>
              </div>
            </li>
          </ul>

          <div class="boxfoot"></div>
        </div>

        <div class="boxall">
          <div class="alltitle">各种识别信号之后的行为</div>
          <div style="height: 3.37rem" id="echart5"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
      <li>
        <div class="boxall" style="padding: 0;">
            <div class="map1" style="z-index: -999;"><img src="images/lbx.png" /></div>
            <div class="map2" style="z-index: -999;"><img src="images/jt.png" /></div>
          <div class="camera-container">
            <img id="bg_video" src="./images/camera.png" alt="Camera" style="margin-bottom: 0;z-index: -2;">
            <button class="camera-button" id="activateCameraButton"></button>
            <img id="video_frame" src="#" alt="Video Feed" style="display: none;height: 480px;width: 100%;"/>
          </div>
          <div class="boxfoot"></div>
          <script type="text/javascript" src="./js/sockjs.min.js"></script>
          <script type="text/javascript" src="./js/stomp.min.js"></script>  
          <script>
            $('#activateCameraButton').click(function () {
              $.ajax({
                url: 'http://127.0.0.1:8080/mqtt/camera_start',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ message: '1' }),
                success: function (response) {
                // 成功响应后建立 WebSocket 连接并显示视频
                    
                    
                      connect_websocket();
                },
                error: function (xhr, status, error) {
                  console.error('Error sending command:', xhr, status, error);
                }
              });
            });
            
          </script>
        </div>

        <div class="boxall">
          <div class="alltitle">边缘端资源占用情况</div>
          <div class="allnav" style="height: 1.86rem" id="echart4"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
      <li>
        <div class="boxall" style="height: 5.0rem">
          <div class="alltitle">环境数据</div>
          <div class="alltitle2">
            温度
          </div>
          <div class="allnav2" id="echart22" style="height: 32%;margin-top: 0.1rem;"></div>
          <div class="allnav2" style="height: 30%;margin-top: 0.4rem;">
            <div class="feng" id="feng01"></div>
            <div class="feng" id="feng02"></div>
            <div class="feng" id="feng03"></div>
          </div>
          <div class="boxfoot"></div>
        </div>

        <div class="boxall" style="height: 3.9rem;">
          <div id="allSignal" style="width: 450px;height: 300px;margin-top: 0.2rem;"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
    </ul>
  </div>
  <div class="back"></div>
  <script>
    function echarts_5(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echart5'));
      var lightBlue = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: 'rgba(41, 121, 255, 1)'
        }, {
          offset: 1,
          color: 'rgba(0, 192, 255, 1)'
        }],
        globalCoord: false
      }

      var option = {
        tooltip: {
          show: false
        },
        grid: {
          top: '0%',
          left: '50',
          right: '50',
          bottom: '0%',
        },
        xAxis: {
          min: 0,
          //max: 12000,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false

          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          data: data.map(item => item.objTypeCn),
          //offset: 15,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 14,


          }
        },
        series: [{
          type: 'bar',
          label: {
            show: true,
            zlevel: 10000,
            position: 'right',
            padding: 6,
            color: '#4e84a1',
            fontSize: 14,
            formatter: '{c}'

          },
          itemStyle: {
            barBorderRadius: 25,
            color: '#3facff'
          },
          barWidth: '15',

          data: data.map(item => item.count),
          z: 6
        }
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  </script>
  <script>
    function engToChin(name) {
      if (name === 'smartcar') return '智能汽车'; //
      else if (name === 'red') return '红灯';//
      else if (name === 'green') return '绿灯';//
      else if (name === 'yellow') return '黄灯';//
      else if (name === 'stop') return '停车';//
      else if (name === 'house') return '房子';//
      else if (name === 'grass') return '草地';
      else if (name === 'crosswalk') return '人行横道';//
      else if (name === 'turn_left') return '左转';//
      else if (name === 'turn_right') return '右转';
      else return '其他';

    }
    function echarts_signal(data) {
      var myChart = echarts.init(document.getElementById('allSignal'));
      var colors = [
        '#FF7F50', '#87CEFA', '#DA70D6', '#32CD32', '#6495ED',
        '#FFC0CB', '#DDA0DD', '#FFA07A', '#FFD700', '#6A5ACD',
        '#20B2AA'
      ];

      var option = {
        title: {
          text: '交通信号统计',
          left: 'center',
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '信号类型',
            type: 'pie',
            radius: '50%',
            data: data.map(item => ({ value: item.count, name: engToChin(item.signalType) })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: colors
      };
      myChart.setOption(option)
    }
  </script>
  <script type="text/javascript" src="./js/sockjs.min.js"></script>
  <script type="text/javascript" src="./js/stomp.min.js"></script>
  <script type="text/javascript">
    var stompClient = null;
    var stompClient2 = null;
    function connect() {
      var socket = new SockJS('http://localhost:81/ws');
      stompClient = Stomp.over(socket);
      stompClient.connect({}, function (frame) {
        stompClient.subscribe('/topic/driveActions', function (carStatus) {
          displayCarStatus(JSON.parse(carStatus.body));
        });
        stompClient.subscribe('/topic/Actions', function (message) {
          handlerChart5Data(JSON.parse(message.body));
        });
        stompClient.subscribe('/topic/trafficSignal', function (msg) {
          handlerAllSignalData(JSON.parse(msg.body));
        });
      });
    }
    function connect_websocket() {
              var video_frame = document.getElementById("video_frame");
              var bg = document.getElementById("bg_video");
              bg.style.display = "none";
              video_frame.style.display = 'block';
              var ws = new WebSocket("ws://127.0.0.1:8000/ws");
                    ws.binaryType = "arraybuffer";
                    ws.onmessage = function(event) {
                        var arrayBuffer = event.data;
                        var blob = new Blob([arrayBuffer], {type: "image/jpeg"});
                        var url = URL.createObjectURL(blob);
                        video_frame.src = url;
                        
                    };
            }
    function displayCarStatus(carStatusData) {
      var container = document.getElementById('carStatusList');
      container.innerHTML = ''; // 清空列表
      carStatusData.forEach(function (status) {
        var li = document.createElement('li');
        var spanStatus = document.createElement('span');
        spanStatus.appendChild(document.createTextNode(status.actionDescription));
        spanStatus.style.color = status.actionDescription === '停车' ? 'red' : 'green';

        var spanTime = document.createElement('span');
        spanTime.appendChild(document.createTextNode(status.createTime));

        li.appendChild(spanStatus);
        li.appendChild(spanTime);
        container.appendChild(li);
      });
    }
    function handlerChart5Data(data) {
      echarts_5(data);
    }
    function handlerAllSignalData(msg) {
      echarts_signal(msg);
    }
    connect(); // Connect to WebSocket on page load
  </script>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="./js/sockjs.min.js"></script>
    <script type="text/javascript" src="./js/stomp.min.js"></script>
  <script src="js/jquery.liMarquee.js"></script>
  <script>
    $(function () {
      $('.scrollDiv').liMarquee({
        direction: 'up',
        scrollamount: 30,
        runshort: false
      })
    })
  </script>
</body>

</html>